<template>
    <div class="set-el-input el-col-4-stylechange">

        <el-row :gutter="20"  >
            <el-col :span="4" class="widthStyle"> 状态：<el-select size="small" v-model.number="bugFilter.status" filterable placeholder="请选择" >
              <el-option label="所有"   :value='-1' ></el-option>
              <el-option
                v-for="item in bugStatus"
                :key="item.name"
                :label="item.name"
                :value="item.value">
              </el-option>

            </el-select></el-col>

            <el-col :span="4" class="widthStyle"><div>内容：<el-input size='small' v-model="bugFilter.content"></el-input></div> </el-col>
          <el-col :span="4" >缺陷等级：<el-select size="small" v-model.number="bugFilter.buglevel" filterable placeholder="请选择" >
            <el-option
              label="所有"
              :value='0'
            ></el-option>
            <el-option
              v-for="item in bugLevel"
              :key="item.name"
              :label="item.name"
              :value="item.value">
            </el-option>

          </el-select>

          </el-col>
            <el-col :span="4">提交人：<el-select size="small" v-model="bugFilter.submitter" filterable placeholder="请选择" >
              <el-option
                label="所有人"
                value=""
              ></el-option>
              <el-option
                v-for="item in employees"
                :key="item.id"
                :label="item.name"
                :value="item.name">
              </el-option>

            </el-select></el-col>
            <el-col :span="4">经办人：<el-select size="small" v-model="bugFilter.repairerName" filterable placeholder="请选择" >
              <el-option
                label="所有人"
                value=""
              ></el-option>
              <el-option
                v-for="item in employees"
                :key="item.id"
                :label="item.name"
                :value="item.name">
              </el-option>

            </el-select></el-col>
          <el-col :span="4"><el-button @click="bugFilterMethod" size='small' type="primary">查询</el-button><el-button size='small' @click="cleraFilter" type="primary">清空</el-button></el-col>
        </el-row>
      <el-button @click="switchAddbugflag" size="small" type="primary">新增</el-button>
      <li v-show="addbugflag">

        <el-input v-model="newbug.describe" size="mini" clearable></el-input>
        <el-select size="mini" v-model.number="newbug.bugLevel" filterable placeholder="请选择" >

        <el-option
          v-for="item in bugLevel"
          :key="item.name"
          :label="item.name"
          :value="item.value">
        </el-option>

      </el-select>

        <el-select size="mini" v-model="repairerNameTmp" filterable placeholder="请选择经办人" @change="selectRepair($event)">
          <el-option
            v-for="item in employees"
            :key="item.id"
            :label="item.name"
            :value="item">
          </el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-plus" size="small" @click="addbug(iterantionInfo)"></el-button>
      </li>
      <el-table :data="filterData"  >
        <el-table-column type="index" width="50">
        </el-table-column>
        <el-table-column label="状态" width="100" sortable prop="status">
          <template slot-scope="{row,index}">
            <el-dropdown size='small' @command="bugstatechange($event,row,iterantionInfo)" trigger="click">
                        <span class="el-dropdown-link "  :style="{background:bugStatusColor(row),color:'white',border:0,padding:'3px 5px',borderRadius: '4px'} ">
                          {{bugStatusObj[row.status]}}<!--<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
                        </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(itemstatus,index) in bugStatus" :command="itemstatus.value"
                                  :key="index">{{itemstatus.name}}
                </el-dropdown-item>
              </el-dropdown-menu>

            </el-dropdown>
          </template>
        </el-table-column>

        <el-table-column label="描述">
          <template slot-scope="{row,index}">
            <span v-show="row.status == 4&&!row.editable" @dblclick="edit(row, getblurname('bug'+row.id))"><s>{{row.describe}}</s></span>
            <span v-show="row.status !== 4&&!row.editable" @dblclick="edit(row, getblurname('bug'+row.id))">{{row.describe}}</span>
            <input class='input_size' v-show="row.editable" v-model="row.describe" size="mini"
                   @blur="updatebug(row,iterantionInfo)" :ref="getblurname('bug'+row.id)"/>
          </template>
        </el-table-column>

        <el-table-column label="缺陷等级" width="150" >
          <template slot-scope="{row,index}">

            <el-dropdown size='small' @command="buglevelChange($event,row,iterantionInfo)" trigger="click">
                        <span class="el-dropdown-link "  :style="{color:'#606266',border:0,padding:'3px 5px',borderRadius: '4px'} ">
                          {{bugLevelObj[row.bugLevel]}}<!--<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
                        </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(itemstatus,index) in bugLevel" :command="itemstatus.value"
                                  :key="index">{{itemstatus.name}}
                </el-dropdown-item>
              </el-dropdown-menu>

            </el-dropdown>


          </template>

        </el-table-column>



        <el-table-column label="提交人" width="150" >
          <template slot-scope="{row,index}">
            <span v-if="row.submiteer.userName"   >{{row.submiteer.userName }}</span>
          </template>

        </el-table-column>

        <el-table-column label="经办人" width="260">
          <template slot-scope="{row,index}">
            <!--style="background:#409EFF;color:white;border-radius: 4px;padding: 3px 5px"-->
           <!-- <span style="background:#409EFF;color:white;border-radius: 4px;padding: 3px 5px"></span>-->
            <el-select size="mini" v-model="row.repairer.userName" filterable placeholder="请选择"  @change="workChange($event,row)">
              <el-option
                v-for="item in employees"
                :key="item.id"
                :label="item.name"
                :value="item">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>

    </div>
</template>

<script>
  import {getBugs,saveBugs,getBugStatus,getBugLevel}  from '../../../api/testmanager'
  import  vue from 'vue'
    export default {
        name: "bugManager",
      data(){
          return{
            addbugflag: false,
            newbug: {
              id: 0,
              submiteer:{},
              repairer: {},
              status: 0,
              describe: '',
              bugLevel:3
            },
            bugFilter:{
              status:-1,
              repairerName:'',
              submitter:'',
              content:'',
              buglevel:0,
            },
            bugStatus: [],
            bugStatusObj: {},
            repairerNameTmp:"",
            currentUser:{},
            filterData:[],
            bugLevel:[],
            bugLevelObj:{},
          }

      },
      filters: {

      },
      methods:{
          getBuglevel(){

            getBugLevel()
              .then(res=>{
                this.bugLevel = res.data
                res.data.map(item=>{
                  this.bugLevelObj[item.value] = item.name
                })
              }).catch(err=>{
              this.$alert(err.data, 'error')
            })
          },
         switchAddbugflag(){//判断是否处于登录状态

            if (!localStorage.getItem('currentUser')){//未登录状态
              this.$store.dispatch('setloginflag',true )
            }else{
              this.addbugflag = true
            }

         } ,
        bugFilterMethod(){
            //this.filterData

          let filter = []

            for(let bug of this.iterantionInfo.bugs){
             // console.log(bug)
             if (this.bugFilterWords(bug.status, this.bugFilter.status, -1)
                  &&this.bugFilterWords(bug.describe,this.bugFilter.content.trim(),'',true)
                  &&this.bugFilterWords(bug.repairer.userName,this.bugFilter.repairerName,'')
                  &&this.bugFilterWords(bug.submiteer.userName,this.bugFilter.submitter,'')
                  &&this.bugFilterWords(bug.bugLevel,this.bugFilter.buglevel,0)){
             //  return true
               filter.push(bug)
             }


            }

          this.filterData = filter


        },
        /**input：输入需要判断的值
         * condition:用于判断的条件
         * skip：当condition 与skip 一至时不做判断，返回true
         * iscontain:true时 包含关系  input 包含 condition
        */

        bugFilterWords(bugInput,condition,skip,iscontain){//过滤单个bug，判断bug是否符合,
            if (condition != skip && !iscontain) {
              return bugInput == condition
            }
            if (condition != skip && iscontain) {
            return bugInput.indexOf(condition) > -1
          }

            return true
        },
        cleraFilter(){
          this.bugFilter.repairerName=''
          this.bugFilter.submitter=''
         // vue.set(this.bugFilter,'bugStatus','-1')
          this.bugFilter.status=-1
          this.bugFilter.content=''
          this.bugFilter.buglevel=0
          this.bugFilterMethod()
        },
        addbug(iterantionInfo) {   //判断是否处于登录状态，否则要求登录并将提交bug状态置为false ，处于登录状态，则获取用户信息，并提交请求
          if (this.newbug.describe.trim() != '') {
            console.log(this.newbug)
            if (!localStorage.getItem('currentUser')) {
              this.$store.dispatch('setloginflag',true )
              this.addbugflag = false
              return
            }
            let user = JSON.parse(localStorage.getItem('currentUser'))
            let worker= {
              id:0,
              userName:'',
              userId:0
            }
            worker.userName = user.name
            worker.userId = user.id
            this.newbug.submiteer = worker
            saveBugs(iterantionInfo.id, this.newbug)
              .then(res => {
                let bugs = res.data
                vue.set(iterantionInfo, 'bugs', bugs)
                //this.addbugflag = false
                // this.newbug.productid=0
               this.newbug.describe = ''

                this.bugFilterMethod()
              }).catch(err => {
              this.$alert(err.data, 'error')
            })
          }

        //  this.newbug.describe = ''
         this.addbugflag = false
        //  vue.set(this.newbug,'bugLevel',3)

        },
        edit(value2, index) {

          vue.set(value2, 'editable', true)
        },
        /*   NEW("新缺陷",0),
  Fixing("修理中",2),
  Fixed("已修复",3),
  Closed("已关闭",4),
  unFixed("未修复",1)*/
        bugStatusColor(bug){
          if (bug.status == 0 || bug.status == 1){
            return '#F56C6C'
          }
          if (bug.status == 2 ) return '#909399'
          if (bug.status == 3) return '#E6A23C'
          if (bug.status == 4 || bug.status == 5  || bug.status == 6 || bug.status == 7) return '#67C23A'


        },
        buglevelChange(val, bug, iterantionInfo){
          bug.bugLevel = val;

          saveBugs(iterantionInfo.id, bug).then(res => {
            vue.set(bug, 'bugLevel', val)
          }).catch(err => {
            // bug.isfixed = !value1.isfixed
            this.$alert(err.data, 'error')
          })

        },


        bugstatechange(val, bug, iterantionInfo) {/*,value1,row*/


          bug.status = val;
          if (1 == val){
            bug.bugUnfixedCount+=1
          }
          saveBugs(iterantionInfo.id, bug).then(res => {
            vue.set(bug, 'status', val)
          }).catch(err => {
            // bug.isfixed = !value1.isfixed
            this.$alert(err.data, 'error')
          })

        },
        workChange(event,row){
          console.log(event)
          let workers = {
            id:0,
            userName:'',
            userId:0
          }
          /*workers.userName=event.name
          workers.userId=event.id
          row.repairer = workers*/
          row.repairer.userName=event.name
          row.repairer.userId=event.id
          saveBugs(this.iterantionInfo.id,row)
            .then(res=>{

            }).catch(err=>{

          })

          console.log(row)
        },
        selectRepair(event){

            let worker = {
              id:0,
              userId:0,
              userName:''
            }
            worker.userName=event.name
            worker.userId=event.id
            this.newbug.repairer = worker

          this.repairerNameTmp = event.name

        },
        getbugStatus() {
          if (this.bugStatus.length === 0) {
            getBugStatus().then(res => {
              res.data.map(item => {

                this.bugStatusObj[item.value] = item.name;
              });


              this.bugStatus = res.data
            }).catch(err => this.$alert("getbugStatus error /r/t", err.data))
          }
         // return this.bugstatus;
        },
        updatebug(bug,iterantionInfo) {
          vue.delete(bug, 'editable')
          saveBugs(iterantionInfo.id,bug)
            .then(res => {

            }).catch(err => {
            this.$alert(err.data, 'error')
          })

          //  delete value[editable]
        },
        /*copyBugsData(){
          this.originData = this.iterantionInfo.bugs
        },*/


        getblurname(nameflag) {
          return `inputblur${nameflag}`
        },

      },
      mounted(){
        this.getbugStatus();
        this.bugFilterMethod();
        this.getBuglevel();
      },
      props:[
        'iterantionInfo',
        'employees',
      ],
    }
</script>

<style scoped>

  .el-row {
    margin: 20px;


  }
  .set-el-input >>> .el-input {
    position: relative;
    display: inline-block;
    width: 50%
  }
  .widthStyle >>>  .el-input{
    position: relative;
    display: inline-block;
    width: 60%
  }
  .bugstyle{
    margin: 5px;
    height: 20px;

  }
  .input_size {
    height: 20px;
    width: 50%;
    padding: 0px;
  }
  .badgeitem {
    margin-top: 10px;
    margin-right: 50px;
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
    border: 1px solid #8c939d ;
    border-radius: 5px;
  }
   .set-el-input /deep/ .el-table td, .el-table th {
    padding: 5px 0;
    min-width: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    text-align: left;
  }
  .el-col-4-stylechange >>> .el-col-4{
    width: auto;
  }
</style>
